<template>
	<view class="flex flex-direction bg-white">
		<view class="cu-custom flex flex-direction" :style="[{height:CustomBar + 'px'}]" style="background: #128EFF;">
			<view class="cu-bar flex justify-center" :style="{height:CustomBar+'px',paddingTop:StatusBar+'px'}">
				<text style="margin: 32rpx;font-size: 40rpx;color: #FFFFFF;line-height: 50rpx;">
					学习中心
				</text>
			</view>
			<view class="flex">
				<view class="flex flex-direction flex-sub">
					<text>今日学习</text>
					<text>34分钟</text>
				</view>
				<view class="flex flex-direction flex-sub">
					<text>超过平台</text>
					<text>40%学员</text>
				</view>
			</view>
		</view>
		<view style="padding: 16rpx 32rpx;">
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
				interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
						v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper>
		</view>
		<view style="display: flex; margin-top: 16rpx;animation: show 0.4s 1" >
			<view v-for="(item,index) in columnList" :key="item.id" @click="goTo(item.pageName)" class="flex flex-direction flex-sub justify-center align-center" style="padding: 16rpx 32rpx 0;"  :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
				<view :style="'background-color:'+item.bdColor" style="width: 80rpx; height: 80rpx; border-radius: 50%;"   class="flex justify-center align-center">
					<text :class="item.icon"  style="font-size: 38rpx;color: #F0F0F0;"></text>
				</view>
				<text style="margin-top: 8rpx; font-size: 14px; color: #333333;">{{item.name}}</text>
			</view>
		</view>
		<!-- 专栏 -->
		<!-- margin-bottom 用来给 tabbar(fixed定位)占位 -->
		<view style="margin-top: 64rpx;animation: show 0.8s ease-in-out" >
			<!-- 文章 -->
			<view style="padding: 0 32rpx 0; margin-bottom: 64rpx;">
				<text style="font-size: 18px;font-weight: bold;color: #333333;line-height: 24px;">
					文章
				</text>
					<view class="">
						<view v-for="(art,index) in articlelist.slice(0, 4)" :key="index" style="margin-top: 32rpx;">
							<!-- 展示列表 -->
							<artcell :art="art"></artcell>
						</view>
					</view>
				<view class="flex justify-center align-center" style="margin-top: 48rpx;">
					<button @click="goTo('articleColumn')" :plain="true" style="width: 160rpx;height: 64rpx;border-radius: 4px;border-color:#979797;font-size: 24rpx;color: #979797;">
						查看更多
					</button>
				</view>
			</view>
			<!-- 文章 end-->	
			
			
			<!-- 讲书 -->
			<view style="padding: 0 32rpx 0; margin-bottom: 64rpx;">
				<text style="font-size: 18px;font-weight: bold;color: #333333;line-height: 24px;">
					推荐讲书
				</text>
					<view class="">
						<view v-for="(book,index) in booklist.slice(0, 4)" :key="index" style="margin-top: 32rpx;"  @click="$Router.push({name:'bookDetail',params:{id:book.id}})">
							<!-- 展示列表 -->
							<book-cell :book="book"></book-cell>
						</view>
					</view>
				<view class="flex justify-center align-center" style="margin-top: 48rpx;">
					<button @click="goTo('bookColumn')" :plain="true" style="width: 160rpx;height: 64rpx;border-radius: 4px;border-color:#979797;font-size: 24rpx;color: #979797;">
						查看更多
					</button>
				</view>
			</view>
			<!-- 讲书 end-->	
			<!-- 占位区域 -->
			<view style="height: calc(100upx + env(safe-area-inset-bottom) / 2);"></view>
		</view>
	</view>
</template>

<script>
	import bookCell from '../../components/column/bookCell.vue'
	import artcell from '../../components/column/artcell.vue'
	import articleApi from '../../api/articleApi.js'
	export default {
		components: {
			bookCell,
			artcell
		},
		data() {
			return {
				columnList: [],
				swiperList: [],
				booklist:[],
				articlelist: [],
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
			}
		},
		mounted(){
			this.getData()
		},
		methods: {
			getData(){
				articleApi.getAllArticle().then(res=>{
					// console.log(res)
					this.articlelist=res.data
					this.articlelist.forEach((item,index)=>{
						item["imglist"]=item.cover.split(",")
				        delete item.cover
					})
				})
				this.$http.get('/edu/book/getAllBook').then(res => {
					this.booklist = res.data
				})
			},
			goTo(pageName) {
				if(pageName) {
					this.$Router.push({name: pageName})
				}
			}
		}
	}
</script>

<style>
</style>
